
<!-- 通过省市区选择在百度地图上定位，此部分用于用户在完善信息页面选择地址 -->

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	#allmap {
		width: 600px;
		height: 300px;
		overflow: hidden;
		margin:0;
		font-family:"微软雅黑";
	}
	</style>
	<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=rsi8ehEBjC2RV6a6Nbgwt7e0RjSv8lRH"></script>
	<script type="text/javascript" src="js/selectAddress.js"></script>
	<script src="jquery-2.2.3.min.js" type="text/javascript"></script>
	<title>地图展示</title>
</head>
<body>
	<!-- 省市区三级联动下拉选择框 -->
	<div>
	省：<select id="cmbProvince"></select>
	市：<select id="cmbCity"></select>
	区：<select id="cmbArea"></select>
	</div>
	
	<!-- 百度地图显示区，窗口大小设置在上面 -->
	<div id="allmap"></div>
	
</body>
</html>
<script type="text/javascript">
	addressInit('cmbProvince', 'cmbCity', 'cmbArea', '四川', '成都市', '高新区');    //初始化下拉框信息显示
	// 百度地图API功能
	var map = new BMap.Map("allmap");    // 创建Map实例
	map.centerAndZoom(new BMap.Point(104.07, 30.67), 13);  // 初始化地图,设置中心点坐标和地图级别
	//添加地图类型控件
	map.addControl(new BMap.MapTypeControl({
		mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
		]}))
	map.setCurrentCity("成都");
	map.enableScrollWheelZoom(true);         //启用滚轮缩放
	
	var geoc = new BMap.Geocoder();    
	map.addEventListener("click", function(e){        //监听地图点击事件
		map.clearOverlays();     //清除当前地图上存在的点
		//alert(e.point.lng + "," + e.point.lat);  //获取点击地区经纬度坐标
		var point2 = new BMap.Point(e.point.lng, e.point.lat);
		map.addOverlay(new BMap.Marker(point2));   //在点击的位置放置点
		var pt = e.point;
		geoc.getLocation(pt, function(rs){
			var addComp = rs.addressComponents;
			//获取点击的地址信息,是以[Object,Object]形式
			//alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
			//selectAddress即为拼接出来的在地图上点击的最终地址
			var selectAddress=addComp.province +addComp.city +addComp.district +addComp.street +addComp.streetNumber;
			alert(selectAddress);
		});        
	});
	
	
	$(document).ready(function(){
		$('#cmbProvince').change(function(){
			//alert($("#cmbProvince").val());
			var address=$("#cmbProvince").val()+"省"+$("#cmbCity").val()+$("#cmbArea").val();
			//alert(address);
			// 创建地址解析器实例     
			var myGeo = new BMap.Geocoder();      
			// 将地址解析结果显示在地图上，并调整地图视野    
			myGeo.getPoint(address, function(point){      
				if (point) {      
					map.centerAndZoom(point, 18);      
					//map.addOverlay(new BMap.Marker(point));      
				}      
			 }, 
			$("#cmbCity").val());
		})
		
		$('#cmbCity').change(function(){
			//alert($("#cmbProvince").val());
			var address=$("#cmbProvince").val()+"省"+$("#cmbCity").val()+$("#cmbArea").val();
			//alert(address);
			// 创建地址解析器实例     
			var myGeo = new BMap.Geocoder();      
			// 将地址解析结果显示在地图上，并调整地图视野    
			myGeo.getPoint(address, function(point){      
				if (point) {      
					map.centerAndZoom(point, 18);      
					//map.addOverlay(new BMap.Marker(point));      
				}      
			 }, 
			$("#cmbCity").val());
		})
		
		$('#cmbArea').change(function(){
			//alert($("#cmbProvince").val());
			var address=$("#cmbProvince").val()+"省"+$("#cmbCity").val()+$("#cmbArea").val();
			//alert(address);
			// 创建地址解析器实例     
			var myGeo = new BMap.Geocoder();      
			// 将地址解析结果显示在地图上，并调整地图视野    
			myGeo.getPoint(address, function(point){      
				if (point) {      
					map.centerAndZoom(point, 18);      
					//map.addOverlay(new BMap.Marker(point));      
				}      
			 }, 
			$("#cmbCity").val());
		})
	})
	
</script>